<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" th:href="@{//unpkg.com/layui@2.6.8/dist/css/layui.css}">
    <script type="text/javascript" th:src="@{//unpkg.com/layui@2.6.8/dist/layui.js}"></script>
</head>

<body class="layui-layout-body">
    <!--头-->
    <!--在html的head元素中通过th:replace属性引入，值为模板的路径，
    不需要模板的后缀后面::跟的是模板的ID(即公共header页面中th:fragment定义的值)-->
    <div th:replace="head :: header"></div>

    <!--主体内容部分-->
    <div class="layui-body" style="margin: 5%">
        <ul class="layui-timeline">

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">5月28日</h3>
                    <p >离别也许是为了下一次相遇 </p>
                    <ul>
                        <li>时间匆匆而行，一年又一年，时间冲刷了一切，时间又保留了一切。</li>
                        <li>无论我们走多远，再回首依然会想起我们在一起奋斗的无数日夜！</li>
                    </ul>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">4月21日</h3>
                    <p>考试前夕,辗转反侧</p>
                    <ul>
                        <li>黄沙百战穿金甲，不破楼兰终不还。</li>
                    </ul>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <h3 class="layui-timeline-title">12月15日</h3>
                    <p>五湖四海九州牧</p>
                    <ul>
                        <li>昔日龌龊不足夸，</li>
                        <li>今朝放荡思无涯。</li>
                        <li>春风得意马蹄疾，</li>
                        <li>一日看尽长安花。</li>
                    </ul>
                </div>
            </li>

            <li class="layui-timeline-item">
                <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                <div class="layui-timeline-content layui-text">
                    <div class="layui-timeline-title">过去</div>
                </div>
            </li>

        </ul>


    </div>

    <!--底部内容部分-->
    <div th:replace="footer :: footer"></div>
</body>
</html>